<template>
  <div id="app">
     <table border="1" width="800" style="margin:0 auto">
         <tr v-for="(item,index) in shopList" :key="index">
             <td>{{item.id}}</td>
             <td>{{item.name}}</td>
             <!-- shiif alt 虾尖头 在下一行复制上一行的内容 -->
             <td>{{item.price}}</td>
             <td :class="item.status|statusFn|statusCss('a','b')">{{item.status|statusFn}}</td> /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]$/ 
         </tr>
     </table>
     <hr>
     <button @click="flag = !flag" >点击我切换组件</button>
     <!-- 把a组件和b组件的状态缓存起来 -->
     <!-- <keep-alive> -->
        <A v-if="flag"></A>
        <B v-else></B>
     <!-- </keep-alive> -->
     <button @click="tab=c">点我切换c</button>
     <button @click="tab=d">点我切换d</button>
     <component :is="tab"></component>
   

  </div>
</template>

<script>
import Filter from "./filter/index.js"
import A from "./components/A.vue"
import B from "./components/B.vue"
import C from "./components/C.vue"
import D from "@/components/D.vue"
export default {
  data() {
    return {
      flag:true,
      tab:C,
      c:C,
      d:D,
      // 商品的列表
      shopList: [
        {
          id: 1,
          name: "商品1",
          price: 100,
          status: 1,
        },
        {
          id: 1,
          name: "商品2",
          price: 150,
          status: 2,
        },
        {
          id: 3,
          name: "商品3",
          price: 350,
          status: 3,
        },
        {
          id: 4,
          name: "商品4",
          price: 450,
          status: 4,
        },
      ],
    };
  },
  components:{
    A,B,C,D
  },
  filters: Filter
};
</script>



<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.not-pay {
    color: red;
}
.not-send {
    color: pink;
}
.not-recerive {
    color: yellow;
}
.not-comment {
    color: skyblue;
}
</style>
